<template>
  <div>
    <!-- 订单搜索 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form
        :model="searchForm"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input
                v-model="searchForm.orderSn"
                placeholder="请填写订单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退单状态">
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="退单状态"
              >
                <el-option
                  v-for="item in orderStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button type="primary" @click="searchList">搜索</el-button>
              <el-button @click="resetSearchForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 订单展示列表 -->
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin-top: 30px"
    >
      <el-table :data="tableList" border style="width: 100%">
        <el-table-column type="index" label="#" align="center">
        </el-table-column>
        <el-table-column prop="orderSn" label="订单编号" align="center">
        </el-table-column>
        <el-table-column label="退单状态" width="180" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 0" type="warning"
              >待处理</el-button
            >
            <el-button v-if="scope.row.status == 1" type="danger"
              >退货中</el-button
            >
            <el-button v-if="scope.row.status == 2" type="warning"
              >已完成</el-button
            >
            <el-button v-if="scope.row.status == 3" type="success"
              >已拒绝</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reason"
          label="退单原因"
          width="180"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="productName"
          label="商品名称"
          width="180"
          align="center"
        >
        </el-table-column>

        <el-table-column label="商品属性" width="180" align="center">
          <template slot-scope="scope">
            <div v-for="item in scope.row.productAttr" :key="item.key">
              <span>{{ item.key + ":" + item.value }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="商品备注"
          prop="receiveNote"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="添加时间"
          prop="createTime"
          width="180"
          align="center"
        >
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope" align="center">
            <el-button type="primary" @click="viewOrder(scope.row)">
              <i class="el-icon-view">查看订单</i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="start"
        :page-sizes="[5, 10]"
        :page-size="limit"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="fullData"
      >
      </el-pagination>
    </el-card>

    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import { findReturnApply } from "@/api/order/backOrder/backOrder.js";
import buttomBanner from "@/components/buttomBanner";
export default {
  data() {
    return {
      tableList: [],
      initStatus: 0,
      start: 1,
      limit: 5,
      fullData: 0,
      searchForm: {
        orderSn: "",
        status: "",
      },
      orderStatus: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "退货中",
        },
        {
          value: 2,
          label: "已完成",
        },
        {
          value: 3,
          label: "已拒绝",
        },
      ],
    };
  },
  components: {
    buttomBanner,
  },
  methods: {
    // 切换表格每页显示数量
    handleSizeChange(v) {
      this.limit = v;
      this.start = 1;
      this.init();
    },
    // 切换页码
    handleCurrentChange(v) {
      this.start = v;
      this.init();
    },
    // 订单搜索
    searchList() {
      this.initStatus = 1;
      this.init();
    },
    // 重置订单搜索
    resetSearchForm() {
      this.searchForm = {
        orderSn: "",
        status: "",
      };
      this.start = 1;
      this.limit = 5;
      this.init()
    },
    // 查看订单
    viewOrder(item) {
        this.$router.push({name:"OrderBackOrderBackOrderDetail"})
        window.localStorage.setItem("backOrderData",JSON.stringify(item))
    },
    init() {
      var orderReturnQueryVo;
      if (this.initStatus) {
        orderReturnQueryVo = this.searchForm;
      }
      findReturnApply(this.start, this.limit, orderReturnQueryVo).then(
        (res) => {
          if (res.success) {
            res.data.rows.forEach((el) => {
              if (Array.isArray(JSON.parse(el.productAttr))) {
                el.productAttr = JSON.parse(el.productAttr);
                return;
              } else if (
                Array.isArray(JSON.parse(JSON.parse(el.productAttr)))
              ) {
                el.productAttr = JSON.parse(JSON.parse(el.productAttr));
                return;
              } else if (
                Array.isArray(
                  JSON.parse(JSON.parse(JSON.parse(el.productAttr)))
                )
              ) {
                el.productAttr = JSON.parse(
                  JSON.parse(JSON.parse(el.productAttr))
                );
                return;
              }
            });
            this.tableList = res.data.rows;
            this.fullData = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        }
      );
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.img {
  img {
    margin: auto;
    width: 30px;
    height: auto;
  }
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>